<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="z" uri="http://www.liuhuazhi.com/diancan"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>新点餐</title>
<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
<style type="text/css">
body {
	font-size: 12px;
}

.demo {
	width: 100%;
	height: 90%;
	margin: 0 auto;
	clear: both;
	border-top: 1px solid #606060;
}

.m-sidebar {
	position: fixed;
	top: 0;
	right: 0;
	background: #000;
	z-index: 2000;
	width: 35px;
	height: 100%;
	font-size: 12px;
	color: #fff;
}

.cart {
	color: #fff;
	text-align: center;
	line-height: 20px;
	padding: 200px 0 0 0px;
}

.cart span {
	display: block;
	width: 40px;
	margin: 0 auto;
}

.cart i {
	width: 35px;
	height: 35px;
	display: block;
	background: url(image/car.png) no-repeat;
}

#msg {
	position: fixed;
	top: 300px;
	right: 35px;
	z-index: 10000;
	width: 1px;
	height: 52px;
	line-height: 52px;
	font-size: 20px;
	text-align: center;
	color: #fff;
	background: #360;
	display: none
}

.box {
	width: 180px;
	height: 180px;
	margin-left: 20px;
	border: 1px solid #e0e0e0;
	text-align: center;
}

.box p {
	padding: 4px;
	text-align: center;
}

.box:hover {
	border: 1px solid #f90
}

.box h4 {
	line-height: 20px;
	font-size: 14px;
	color: #f30;
	font-weight: 400
}

.box span {
	font-size: 14px;
}

.u-flyer {
	display: block;
	width: 50px;
	height: 50px;
	border-radius: 50px;
	position: fixed;
	z-index: 9999;
}

.button {
	display: inline-block;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font: 16px/100% 'Microsoft yahei', Arial, Helvetica, sans-serif;
	padding: .5em 2em .55em;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
	-webkit-border-radius: .5em;
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
	-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}

.button:hover {
	text-decoration: none;
}

.button:active {
	position: relative;
	top: 1px;
}
/* orange */
.orange {
	color: #fef4e9;
	border: solid 1px #da7c0c;
	background: #f78d1d;
	background: -webkit-gradient(linear, left top, left bottom, from(#faa51a),
		to(#f47a20));
	background: -moz-linear-gradient(top, #faa51a, #f47a20);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a',
		endColorstr='#f47a20');
}

.orange:hover {
	background: #f47c20;
	background: -webkit-gradient(linear, left top, left bottom, from(#f88e11),
		to(#f06015));
	background: -moz-linear-gradient(top, #f88e11, #f06015);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11',
		endColorstr='#f06015');
}

.orange:active {
	color: #fcd3a5;
	background: -webkit-gradient(linear, left top, left bottom, from(#f47a20),
		to(#faa51a));
	background: -moz-linear-gradient(top, #f47a20, #faa51a);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20',
		endColorstr='#faa51a');
}

.searchinput {
	border-right-width: 0px;
	padding-left: 3px;
	width: 168px;
	font-family: arial;
	float: left;
	border-top-width: 0px;
	border-bottom-width: 0px;
	color: #636365;
	margin-left: 4px;
	font-size: 12px;
	vertical-align: middle;
	border-left-width: 0px;
	margin-right: 3px;
}

.tab_search {
	border-bottom: #cccccc 1px solid;
	border-left: #cccccc 1px solid;
	height: 20px;
	border-top: #cccccc 1px solid;
	border-right: #cccccc 1px solid;
}

a {
	text-decoration: none;
	padding: 10px;
}

.searchaction {
	float: left;
}

.head {
	padding-top: 1%;
	margin: 0 auto;
	text-align: center;
	margin: 0 auto;
}

body {
	background-image: url("image/body_bj.jpg");
}

.search {
	float: left;
}

.head_item {
	margin: 0 auto;
	width: 100%;
	height: auto;
	border: 1px solid #A8A8A8;
}

.cai {
	width: 90px;
	float: left; margin-left：5 %;
	margin-top: 1.3%;
	padding-left: 1%;
}

.input_find {
	float: left;
	padding-top: 1%;
}

.header {
	height: 30px;
}

.selectedd {
	height: 25px;
}

.select_div {
	float: left;
	margin-top: 0.5%;
	height: 40px;
}

.tanchu {
	height: 300px;
	width: 400px;
	position: absolute;
	z-index: 10;
	display: none;
	overflow: hidden;
	top: 70.5px;
	right: 34px;
	float: right;
	color: #666;
	border: 4px solid rgba(0, 0, 0, .1);
	border-radius: 5px;
}

.tanchu .title {
	width: 100%;
	position: relative;
	padding: 0 10px;
	height: 20px;
	line-height: 20px;
	background: #f3f3f3;
	font-size: 12px;
	font-family: "Microsoft YaHei"
}

.tanchu .title_name {
	width: auto;
	height: auto;
	float: left;
}

.tanchu .title .guanbi {
	position: relative;
	float: right;
	cursor: pointer;
	display: block;
	right: 10px;
	width: 20px;
	height: 20px;
}

.tanchu iframe {
	width: 100%;
	height: 100%;
	margin: 0 auto;
	background-image: url("image/body_bj.jpg");
}

.tanchu-bg {
	display: none;
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 9;
	opacity: 0.15;
	width: 100%;
	height: 950px;
	background-color: rgb(0, 0, 0);
}
</style>
<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
<script src="js/jquery.fly.min.js"></script>
<script type="text/javascript">
	$(function() {
		$(".btn2").click(function() {
			var a = $(".selectedd").val();
			location = "GoodsServlet?op=14&curpage=1&pagesize=10&type_id=" + a;
		});
		$(".addcar").click(
				function() {
					var a = $(this).attr("gid");
					var b = window.location.href;
					$.post("CartServlet", {
						op : 5,
						gid : a,
						location : b,
						phone : 999999
					}, function() {
						$("#msg").show().animate({
							width : '250px'
						}, 200).fadeOut(1000);
						addcar.css("cursor", "default").removeClass('orange')
								.unbind('click');
						this.destory();
					});
				});
	});
</script>
<!--[if lte IE 9]>
<script src="js/requestAnimationFrame.js"></script>
<![endif]-->
<script>
	$(function() {
		var offset = $("#end").offset(); //结束的地方的元素
		$(".addcar").click(function(event) { //是$(".addcar")这个元素点击促发的 开始动画的位置就是这个元素的位置为起点
			var addcar = $(this);
			var img = addcar.parent().parent().find('img').attr('src');
			var flyer = $('<img class="u-flyer" src="'+img+'">');
			flyer.fly({
				start : {
					left : event.pageX,
					top : event.pageY
				},
				end : {
					left : offset.left + 10,
					top : offset.top + 10,
					width : 0,
					height : 0
				},
				onEnd : function() {
				}
			});
		});
	});
</script>
</head>
<body>
	<div id="main">
		<div style="text-align: center;">
			<h3>点餐</h3>
			<hr>
		</div>
		<div class="header">
			<div class="cai">搜索菜品：</div>
			<div class="input_find">
				<form action="GoodsServlet" name="search">
					<table border="0" cellpadding="0" cellspacing="0"
						class="tab_search">
						<tr>
							<td><input type="hidden" name="op" value="15"> <input
								type="hidden" name="curpage" value="1"> <input
								type="hidden" name="pagesize" value="5"> <input
								type="text" name="name" title="Search" class="searchinput"
								id="searchinput" value="只能输入中文或字母"
								onkeyup="value=value.replace(/[^\a-\z\A-\Z\u4E00-\u9FA5]/g,'')"
								onfocus="this.value='';" /></td>
							<td><input type="image" width="21" height="17"
								class="searchaction" alt="Search" src="image/magglass.gif"
								border="0" /></td>
						</tr>
					</table>
				</form>
			</div>
			<div class="cai">菜品分类：</div>
			<div class="select_div">
				<select name="select" class="selectedd">
					<option value="9999">全部菜式</option>
					<c:forEach items="${map.typelist}" var="tl">
						<c:if test="${tl.type_id==z}" var="x">
							<option value="${tl.type_id}" selected>${tl.type}</option>
						</c:if>
						<c:if test="${not x}">
							<option value="${tl.type_id}">${tl.type}</option>
						</c:if>
					</c:forEach>
				</select>
			</div>
			<div class="cai">
				<button
					style="width: 100px; height: 22px; margin-top: -10px; background-color: #4e72b8; border-radius: 3px; font-size: 14px; color: white;"
					class="btn2">分类搜索</button>
			</div>
		</div>
		<div class="demo">
			<c:forEach items="${map.Goodslist}" var="x">
				<div style="float: left; margin-top: 10px">
					<div class="box">
						<div>
							<img src="upload/${x.image}" class="imgg" width="180"
								height="120"> <span class="time">销量：${x.sale_num} </span>
						</div>
						<span>¥${x.price}</span>
						<p>${x.name}</p>
					</div>
					<div
						style="text-align: center; margin-top: 5px; margin-left: 20px;">
						<a href="#" class="button orange addcar" gid="${x.goods_id} "
							id="adcar">加入购物车</a>
					</div>
				</div>
			</c:forEach>
		</div>

		<div style="text-align: center; clear: both;">
			<z:fenye url="GoodsServlet" pagesize="${param.pagesize}"
				total="${map.total}" curpage="${param.curpage}" op="13" />
		</div>
		<div class="m-sidebar">
			<div class="cart">
				<i id="end"></i> <span>购物车</span>
			</div>
		</div>
		<div id="msg">已成功加入购物车！</div>
	</div>
	<!-- 弹出层  -->
	<div class="tanchu">
		<div class="title">
			<div class="guanbi" onclick="guanbi()">
				<img alt="关闭" src="image/close.png" width="100%" height="100%">
			</div>
		</div>
		<iframe frameborder="0" name="iframe2" id="myframe"
			src="CartServlet?op=6&phone=999999"></iframe>
	</div>
	<div class="tanchu-bg"></div>

</body>
<script type="text/javascript">
	//	隐藏弹出层
	function guanbi() {
		$(".tanchu-bg").hide();
		$(".tanchu").hide();
	}
	//显示弹出层
	function xianshi() {
		var height = document.body.scrollHeight;
		$(".tanchu-bg").attr("height", height);
		$(".tanchu-bg").show();
		$(".tanchu").show();
	}
	$(".m-sidebar").click(function() {
		$('#myframe').attr('src', $('#myframe').attr('src'));
		var height = document.body.scrollHeight;
		$(".tanchu-bg").attr("height", height);
		$(".tanchu-bg").show();
		xianshi();
	});
	$(".close").click(function() {
		guanbi();
	});
</script>
<style>
.time {
	left: 0px;
	bottom: 0px;
	height: 30px;
	background: #000;
	display: block;
	filter: alpha(opacity = 40);
	opacity: 0.4;
	width: 100%;
	color: white;
	line-height: 30px;
	margin-top: -30px;
}
</style>
</html>